<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 大哥最牛逼
  Date: 2019/11/1
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间信息管理</title>
    <%--导入layui.js--%>
    <script type="text/javascript" src="<c:url value='/res/tool/layui/layui.js'/>"></script>
    <%--导入layui.css--%>
    <link rel="stylesheet" type="text/css" href="<c:url value='/res/tool/layui/css/layui.css'/> "/>
    <%--导入jquery--%>
    <script type="text/javascript" src="<c:url value='/res/js/jquery-3.4.1.js'/> "></script>
    <%--导入vue--%>
    <script type="text/javascript" src="<c:url value='/res/js/vue.min.js'/> "></script>
    <%--导入axios--%>
    <script type="text/javascript" src="<c:url value='/res/js/axios.min.js'/> "></script>

    <style type="text/css">
        body{
            margin: 0px;
        }
        #app{
            width:1280px;
            height: 640px;
            background-color: white;
            border: 1px solid white;
            margin: 0 auto;
        }
        #top{
            border: 1px solid white;
            margin-top: 10px;
            margin-left: 30px;
        }
        #content{
            width:1278px;
            height: 520px;
            border: 1px solid white;
            margin:0 auto;
            margin-top:30px;
        }
        .layui-form-item .layui-input-inline {
            width: 260px;
        }
        .layui-btn{
            line-height: 35px;
            height: 35px;
        }
        .layui-form{
            border: 1px solid white;
        }
        #oper{
            margin-left: 35px;
            margin-top: 10px;
            border: 1px solid white;
        }
        #datalist{
            border: 1px solid white;
            width:1202px;
            height: 300px;
            margin:0 auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="top">
            <span class="layui-breadcrumb">
              <a href="">房屋租赁管理</a>
              <a href="">房屋信息管理</a>
              <a href=""><cite>房间/店铺信息管理</cite></a>
            </span>
    </div>
    <h2 style="margin-left: 30px;margin-top: 10px;font-weight: bold">房间/店铺信息管理</h2>
    <hr/>
    <div id="content">
        <form class="layui-form" action="toRoomView" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">房间名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="rname" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">归属楼栋:</label>
                <div class="layui-input-inline">
                    <select name="budingId" lay-filter="selectbid">
                        <option></option>
                        <c:forEach items="${bs}" var="buding">
                            <option value="${buding.id}">${buding.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-left: 35px;">
                    <button class="layui-btn layui-btn-normal" lay-submit  lay-filter="select">查&ensp;询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重&ensp;置</button>
                </div>
            </div>
        </form>
        <div id="oper">
            <button class="layui-btn layui-btn-normal" @click="newr">+&ensp;新建</button>
            <button class="layui-btn layui-btn-primary" @click="dels">删除</button>
        </div>

        <div id="datalist">
            <table id="demo" lay-filter="dlist" ></table>
        </div>
        <div id="page" style="border: 1px solid white;margin-left: 250px;margin-top: 15px"></div>
    </div>

    <%--添加修改表单弹出层--%>
    <div id="postRoom" hidden="hidden">
        <form class="layui-form" action="addRoom" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">房间名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">归属楼栋:</label>
                <div class="layui-input-inline">
                    <select name="budingid" lay-filter="selectbid" lay-verify="required">
                        <option></option>
                        <c:forEach items="${bs}" var="buding">
                            <option value="${buding.id}">${buding.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间类型:</label>
                <div class="layui-input-inline">
                    <input type="text" name="type" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间面积:</label>
                <div class="layui-input-inline">
                    <input type="text" name="mianji" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间描述:</label>
                <div class="layui-input-inline">
                    <textarea name="info" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addRoom">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <%--修改房间信息弹出层--%>
    <div id="updateRoom" hidden="hidden">
        <form class="layui-form" action="addRoom" method="post">
            <input type="hidden" name="id" v-model="room.id"/>
            <div class="layui-form-item">
                <label class="layui-form-label">房间名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" v-model="room.name" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">归属楼栋:</label>
                <div class="layui-input-inline">
                    <select name="budingid" v-model="room.budingid" lay-filter="selectbid" lay-verify="required">
                        <option></option>
                        <c:forEach items="${bs}" var="buding">
                            <option value="${buding.id}">${buding.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间类型:</label>
                <div class="layui-input-inline">
                    <input type="text" name="type" v-model="room.type" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间面积:</label>
                <div class="layui-input-inline">
                    <input type="text" name="mianji" v-model="room.mianji" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房间描述:</label>
                <div class="layui-input-inline">
                    <textarea name="info" v-model="room.info" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateRoom">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>

</body>
<script type="text/html" id="barDemo">
    <a style="color: blue;font-size: 13px;cursor: pointer;" lay-event="edit">编辑</a>&ensp;
    <a style="color: blue;font-size: 13px;cursor: pointer;" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.use(['element','form','table','layer','laypage'],function () {
        var element=layui.element;
        var table=layui.table;
        var layer=layui.layer;
        var laypage=layui.laypage;
        var form=layui.form;

        //表单提交添加房间监听
        form.on('submit(addRoom)',function (data) {
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var room = data.field;
            axios.post('addRoom',room)
                .then(function (value) {
                if(value.data){
                    location.reload();
                }
            }).catch(function (reason) {
                layer.alert("添加失败");
                console.log(reason);
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })

        //表单修改房间信息监听
        form.on('submit(updateRoom)',function (data) {
            var json = data.field;
            axios.post('updateRoom',json)
                .then(function (value) {
                    if(value.data){
                        location.reload();
                    }
                }).catch(function (reason) {
                    layer.alert("修改失败");
                    console.log(reason);
            })
            return false;
        })

        //数据表格加载
        table.render({
            id:'rlist'
        });

        var vue=new Vue({
            el:"#app",
            data:{
                bs:{},
                room:{
                    "id":"",
                    "name":"",
                    "budingid":"",
                    "type":"",
                    "mianji":"",
                    "info":""
                }
            },
            methods:{
                newr:function () {
                    layer.open({
                        type:1,
                        area:'410px',
                        title:"添加房间/店铺",
                        content:$("#postRoom")
                    })
                },
                dels:function () {
                    var check=table.checkStatus('rlist');
                    var data=check.data;
                    var arr=new Array();
                    for(var i=0;i<data.length;i++){
                        arr[i]=data[i].roomId;
                    }
                    axios.post('delRoomById',{
                        ids:arr
                    }).then(function (value) {
                        if(value.data){
                            location.reload();
                        }
                    }).catch(function (reason) {
                        console.log(reason);
                        layer.alert("删除失败，信息错误");
                    })
                }
            },
            updated:function () {
                form.render();
            }
        });
        laypage.render({
            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: ${count} //数据总数，从服务端得到
            ,limit:6
            ,layout:['prev', 'page', 'next','limit','skip']
            ,limits:[6,12,18,24]
            ,theme:'#1E9FFF'
            ,groups:9
            ,jump:function (obj, first) {
                axios.get('getRoomByPageAndExample',{
                    params:{
                        "index":obj.curr,
                        "size":obj.limit,
                        <c:if test="${!empty rname}">"rname":"${rname}",</c:if>
                        <c:if test="${!empty budingId}">"budingId":${budingId}</c:if>
                    }
                }).then(function (value1) {
                    var data=value1.data;
                    table.reload('rlist',{
                        elem: '#demo'
                        ,height: 273
                        ,skin:'line'
                        ,id:'rlist'
                        ,limit:data.length
                        // ,url: 'getAllRoomVo' //数据接口
                        // ,page: true //开启分页
                        ,cols: [[ //表头
                            {type:'checkbox',width:50}
                            ,{field: 'roomId', title: '房间编号', width:90,align:'center'}
                            ,{field: 'roomName', title: '房间名称', width:100,align:'center'}
                            ,{field: 'budingName', title: '归属楼栋', width:150,align:'center'}
                            ,{field: 'roomType', title: '房间类型', width:110,sort: true,align:'center'}
                            ,{field: 'mianjiString', title: '房间面积', width:158,sort: true,align:'center'}
                            ,{field: 'info', title: '房间描述', width: 160,}
                            ,{field: 'dayString', title: '创建时间', width: 180, sort: true,align:'center'}
                            ,{title:'操作',width:200, align:'center',toolbar:'#barDemo'}
                        ]]
                        ,data:data
                    });
                })
            }
        });
        table.on('tool(dlist)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                layer.confirm('确定删除选择的行？', function(index){

                    //向服务端发送删除指令
                    var arr=new Array();
                    arr[0]=data.roomId;
                    axios.post('delRoomById',{
                        ids:arr
                    }).then(function (value) {
                        if(value.data){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                    }).catch(function (reason) {
                        layer.close(index);
                        layer.alert("删除失败");
                        console.log(reason);
                    })

                });
            } else if(layEvent === 'edit'){ //编辑
                var roomId = data.roomId;
                axios.get('getRoomById?id='+roomId)
                    .then(function (value) {
                        vue.room=value.data;
                        layer.open({
                            type:1,
                            area:'410px',
                            title:"修改房间信息",
                            content:$("#updateRoom")
                        });
                    })

            }
        });


        form.render();
    });

</script>
</html>
